<template>
  <div style="color: #333333;">
    <title1></title1>

    <!--头部面包屑-->
    <div class="breadCrumbBox flexCenter" ref="logoTop">
      <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item><router-link :to="home">首页</router-link></a-breadcrumb-item>
          <a-breadcrumb-item><router-link :to="projectDetails">京沪沂淮段扩建工程</router-link></a-breadcrumb-item>
          <a-breadcrumb-item><router-link :to="fuConstruction">江苏省交通工程集团有限公司</router-link></a-breadcrumb-item>
          <a-breadcrumb-item><router-link :to="laborUnit">南京仁泰基础工程有限公司</router-link></a-breadcrumb-item>
          <a-breadcrumb-item><router-link :to="teamGroup">路基施工一队</router-link></a-breadcrumb-item>
          <a-breadcrumb-item>人员详情</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>

    <!--人员详情部分-->
    <div class="personDetailBox flexBetween">
<!--      <div class="certificatePoint" id="pointA" style="position: absolute;" :class="pointA"></div>-->
<!--      <div class="attendancePoint" style="position: absolute;top: 861px;border: 1px solid red;"></div>-->
      <div class="leftBox">
        <div class="photoBox"><img src="../../assets/userProfile.png" alt=""></div>
        <p class="personnelCode">人员编码</p>
        <p class="code">1211231231</p>
        <p style="text-align: center"><a-tag class="jobInformation" style="" color="#FF9966">特殊工种</a-tag></p>
      </div>
      <div class="rightBox">
        <div>
          <span class="personName">王志</span>
          <span class="personJob">普工</span>
          <span class="personJob">男</span>
          <span class="personJob">26岁</span>
        </div>
        <div class="personCardBox flexBetween">
          <div>
            <p>民族：汉</p>
            <p>证件号码：31047199508256478</p>
            <p>家庭住址：江苏省南京市雨花台区凤凰小区三栋702</p>
          </div>
          <div>
            <p>出生日期：1995-08-25</p>
            <p>手机号码：15478541254</p>
          </div>
          <div class="idCardBox flexBetween">
            <div>
              <img :src="imgUrlZ" alt="" id="cardZ">
              <p>身份证正面</p>
            </div>
            <div style="margin-left: 36px;">
              <img :src="imgUrlF" alt="" id="cardF">
              <p>身份证反面</p>
            </div>
          </div>
        </div>
        <!--劳务信息-->
        <div class="serviceInformationBox">
          <p>劳务信息</p>
          <div class="serviceInformation labourClass" :style="labourState">
            <div style="height: 30px;"></div>
            <div>
              <span>班组：<router-link :to="teamGroup">路基施工一队</router-link></span>
              <span>劳务单位：<router-link :to="laborUnit">南京仁泰基础工程有限公司</router-link></span>
              <span>健康状况：健康</span>
              <a-icon v-if="!labour" @click="changeLabourHeight" style="margin-right: 35px" type="down" />
              <a-icon v-if="labour" @click="changeLabourHeight" style="margin-right: 35px" type="up" />
            </div>
            <div style="height: 33px;"></div>
            <div>
              <span>血型：A</span>
              <span>进场时间：2020-02-12</span>
              <span>离场时间：</span>
            </div>
          </div>
        </div>

        <!--合同信息-->
        <div class="serviceInformationBox">
          <p>合同信息</p>
          <div class="serviceInformation contractClass" :style="contractState">
            <div style="height: 30px;"></div>
            <div>
              <span>合同期限：2020-02-01~2021-02-01</span>
              <span>合同工资：7500</span>
              <span>银行卡号：625488888888888888</span>
              <a-icon v-if="!contract" @click="changeContractHeight" style="margin-right: 35px" type="down" />
              <a-icon v-if="contract" @click="changeContractHeight" style="margin-right: 35px" type="up" />
            </div>
            <div style="height: 33px;"></div>
            <div>
              <span @click="pdfView" >合同附件：<span style="color: blue;cursor: pointer">xxxxxxxx.pdf</span></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="informationScreeningBox" ref="piediv" :class="isFixed?'fixed':'noFixed'"> <!--:class="isFixed?'fixed':'noFixed'"-->
        <a-tabs :activeKey='defaultActiveKey' @change="callback">
          <a-tab-pane key="1" tab="证书信息"></a-tab-pane>
          <a-tab-pane key="2" tab="考勤信息"></a-tab-pane>
          <a-tab-pane key="3" tab="工资支付"></a-tab-pane>
          <a-tab-pane key="4" tab="工作履历"></a-tab-pane>
        </a-tabs>
    </div>
    <div class="informationScreeningBox" v-show="isFixed"> <!--:class="isFixed?'fixed':'noFixed'"-->
        <a-tabs :activeKey='defaultActiveKey' @change="callback">
          <a-tab-pane key="1" tab="证书信息"></a-tab-pane>
          <a-tab-pane key="2" tab="考勤信息"></a-tab-pane>
          <a-tab-pane key="3" tab="工资支付"></a-tab-pane>
          <a-tab-pane key="4" tab="工作履历"></a-tab-pane>
        </a-tabs>
    </div>

    <div class="personDetailBox" ref="distanceTopA">
      <div class="certificatePoint" style="position: relative;bottom: 183px;" id="pointA"></div>
      <a-table :columns="columns1" :data-source="data1" :pagination="false">
        <a @click="pdfView" slot="enclosure" slot-scope="text">{{ text }}</a>
      </a-table>
    </div>


    <div class="personDetailBoxB" ref="distanceTopB" >
      <div class="attendancePoint" style="position: relative;bottom: 183px;"></div>
      <div class="pointBox"><span class="point">考勤信息</span></div>
      <p style="text-align: center">累计出勤（天）</p>
      <p style="color: #333333;font-size: 28px;text-align: center">519</p>
      <a-table :columns="columns2" :data-source="data2" :pagination="false">
        <a @click="showTimeDetail" slot="january" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="february" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="march" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="april" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="may" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="june" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="july" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="august" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="september" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="october" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="november" slot-scope="text">{{ text }}</a>
        <a @click="showTimeDetail" slot="december" slot-scope="text">{{ text }}</a>
      </a-table>
    </div>

    <div class="personDetailBoxB" ref="distanceTopC">
      <div class="wagesPoint" style="position: relative;bottom: 183px;"></div>
      <div class="pointBox"><span class="point">工资支付</span></div>
      <p style="text-align: center">累计支付工资（元）</p>
      <p style="color: #333333;font-size: 28px;text-align: center">174250.00</p>
      <a-table :columns="columns3" :data-source="data3" :pagination="false">
        <a @click="goSalaryInformation" slot="january" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="february" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="march" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="april" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="may" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="june" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="july" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="august" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="september" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="october" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="november" slot-scope="text">{{ text }}</a>
        <a @click="goSalaryInformation" slot="december" slot-scope="text">{{ text }}</a>
      </a-table>
    </div>

    <div class="personDetailBoxC" ref="distanceTopD">
      <div class="resumePoint" style="position: relative;bottom: 183px;"></div>
      <div class="pointBox"><span class="point">工作履历</span></div>
      <a-table :columns="columns4" :data-source="data4" :pagination="false">
        <a slot="projectName" slot-scope="text"><router-link :to="projectDetails">{{ text }}</router-link></a>
      </a-table>
    </div>
    <supportCompany></supportCompany>

    <div>
      <a-modal v-model="visible" :bodyStyle="{border: '1px solid #EAEAEA'}" :closable="true" :footer="null" :centered="true">
        <div style="border-left: 1px solid #EAEAEA;border-bottom: 1px solid #EAEAEA;">
          <div class="flexBetween">
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
            <p class="date">日期</p>
            <p class="time">考勤时间</p>
          </div>
          <div v-for="(item,index) in dateTimeList" class="flexBetween" :key="index">
            <p class="tableInBox">{{item.a}}</p>
            <p class="tableInBox2">{{item.aa}}</p>
            <p class="tableInBox">{{item.b}}</p>
            <p class="tableInBox2">{{item.bb}}</p>
            <p class="tableInBox">{{item.c}}</p>
            <p class="tableInBox2">{{item.cc}}</p>
            <p class="tableInBox">{{item.d}}</p>
            <p class="tableInBox2">{{item.dd}}</p>
          </div>
        </div>
      </a-modal>
    </div>

    <a-modal v-model="visiblePDF" :bodyStyle="{border: '1px solid #EAEAEA'}" :closable="false" :footer="null" :centered="true">
        <embed width="1000" height="500" src="http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf" type="">
    </a-modal>

  </div>
</template>

<script>
  const columns1 = [
    {
      title: '证书类型',
      dataIndex: 'certificateType',
      key: 'certificateType'
    },
    {
      title: '证书编号',
      dataIndex: 'certificateNo',
      key: 'certificateNo'
    },
    {
      title: '发证日期',
      dataIndex: 'certificateDate',
      key: 'certificateDate'
    },
    {
      title: '发证单位',
      dataIndex: 'certificateUnit',
      key: 'certificateUnit'
    },
    {
      title: '有效期限',
      dataIndex: 'certificateTerm',
      key: 'certificateTerm'
    },
      {
      title: '附件',
      dataIndex: 'enclosure',
      key: 'enclosure',
      scopedSlots: { customRender: 'enclosure' }
    }
  ];
  const data1 = [
    {
      key: '1',
      certificateType: '特种作业证',
      certificateNo: '苏F022019000523',
      certificateDate: '2019-06-03',
      certificateUnit: '江苏省住房和城乡建设厅',
      certificateTerm: '2025-06-02',
      enclosure: '下载'
    }
    // ,{
    //   certificateType: '特种作业证',
    //   certificateNo: '苏F022019000523',
    //   certificateDate: '2019-06-03',
    //   certificateUnit: '江苏省住房和城乡建设厅',
    //   certificateTerm: '2025-06-02',
    //   enclosure: '下载'
    // }
  ];

  const columns2 = [
    {
      title: '年份',
      dataIndex: 'year',
      key: 'year',
    },
    {
      title: '年度累计出勤',
      dataIndex: 'days',
      key: 'days',
    },
    {
      title: '1月',
      dataIndex: 'january',
      key: 'january',
      scopedSlots: { customRender: 'january' }
    },
    {
      title: '2月',
      dataIndex: 'february',
      key: 'february',
      scopedSlots: { customRender: 'february' }
    },
    {
      title: '3月',
      dataIndex: 'march',
      key: 'march',
      scopedSlots: { customRender: 'march' }
    },
      {
      title: '4月',
      dataIndex: 'april',
      key: 'april',
      scopedSlots: { customRender: 'april' }
    },
    {
      title: '5月',
      dataIndex: 'may',
      key: 'may',
      scopedSlots: { customRender: 'may' }
    },
    {
      title: '6月',
      dataIndex: 'june',
      key: 'june',
      scopedSlots: { customRender: 'june' }
    },
    {
      title: '7月',
      dataIndex: 'july',
      key: 'july',
      scopedSlots: { customRender: 'july' }
    },
      {
      title: '8月',
      dataIndex: 'august',
      key: 'august',
        scopedSlots: { customRender: 'august' }
    },
    {
      title: '9月',
      dataIndex: 'september',
      key: 'september',
      scopedSlots: { customRender: 'september' }
    },
    {
      title: '10月',
      dataIndex: 'october',
      key: 'october',
      scopedSlots: { customRender: 'october' }
    },
    {
      title: '11月',
      dataIndex: 'november',
      key: 'november',
      scopedSlots: { customRender: 'november' }
    },
      {
      title: '12月',
      dataIndex: 'december',
      key: 'december',
      scopedSlots: { customRender: 'december' }
    }
  ];
  const data2 = [
    {
      key: '1',
      year: '2021',
      days: '42',
      january: '22',
      february: '20',
      march: '',
      april: '',
      may: '',
      june: '',
      july: '',
      august: '',
      september: '',
      october: '',
      november: '',
      december: ''
    },{
      key: '2',
      year: '2020',
      days: '262',
      january: '21',
      february: '22',
      march: '23',
      april: '22',
      may: '22',
      june: '22',
      july: '22',
      august: '22',
      september: '22',
      october: '22',
      november: '23',
      december: '19'
    }
  ];

  const columns3 = [
    {
      title: '年份',
      dataIndex: 'year',
      key: 'year',
    },
    {
      title: '年度累计支付',
      dataIndex: 'days',
      key: 'days',
    },
    {
      title: '1月',
      dataIndex: 'january',
      key: 'january',
      scopedSlots: { customRender: 'january' }
    },
    {
      title: '2月',
      dataIndex: 'february',
      key: 'february',
      scopedSlots: { customRender: 'february' }
    },
    {
      title: '3月',
      dataIndex: 'march',
      key: 'march',
      scopedSlots: { customRender: 'march' }
    },
      {
      title: '4月',
      dataIndex: 'april',
      key: 'april',
      scopedSlots: { customRender: 'april' }
    },
    {
      title: '5月',
      dataIndex: 'may',
      key: 'may',
      scopedSlots: { customRender: 'may' }
    },
    {
      title: '6月',
      dataIndex: 'june',
      key: 'june',
      scopedSlots: { customRender: 'june' }
    },
    {
      title: '7月',
      dataIndex: 'july',
      key: 'july',
      scopedSlots: { customRender: 'july' }
    },
      {
      title: '8月',
      dataIndex: 'august',
      key: 'august',
        scopedSlots: { customRender: 'august' }
    },
    {
      title: '9月',
      dataIndex: 'september',
      key: 'september',
      scopedSlots: { customRender: 'september' }
    },
    {
      title: '10月',
      dataIndex: 'october',
      key: 'october',
      scopedSlots: { customRender: 'october' }
    },
    {
      title: '11月',
      dataIndex: 'november',
      key: 'november',
      scopedSlots: { customRender: 'november' }
    },
      {
      title: '12月',
      dataIndex: 'december',
      key: 'december',
      scopedSlots: { customRender: 'december' }
    }
  ];
  const data3 = [
    {
      key: '1',
      year: '2021',
      days: '14300',
      january: '7300',
      february: '7000',
      march: '',
      april: '',
      may: '',
      june: '',
      july: '',
      august: '',
      september: '',
      october: '',
      november: '',
      december: ''
    },{
      key: '2',
      year: '2020',
      days: '87500',
      january: '7200',
      february: '7300',
      march: '7400',
      april: '7300',
      may: '7300',
      june: '7300',
      july: '7300',
      august: '7300',
      september: '7300',
      october: '7300',
      november: '7500',
      december: '7000'
    }
  ];

  const columns4 = [
    {
      title: '项目名称',
      dataIndex: 'projectName',
      key: 'projectName',
      scopedSlots: { customRender: 'projectName' }
    },
    {
      title: '标段',
      dataIndex: 'bidSection',
      key: 'bidSection',
    },
    {
      title: '岗位',
      dataIndex: 'job',
      key: 'job',
    },
    {
      title: '班组',
      dataIndex: 'team',
      key: 'team',
    },
    {
      title: '劳务单位',
      dataIndex: 'laborServiceUnit',
      key: 'laborServiceUnit',
    },
      {
      title: '进场时间',
      dataIndex: 'entryTime',
      key: 'entryTime',
    },
      {
      title: '退场时间',
      dataIndex: 'exitTime',
      key: 'exitTime',
    }
  ];
  const data4 = [
    {
      key: '1',
      projectName: '锡通过江通道公路接线工程北接线',
      bidSection: '一标',
      job: '架子工',
      team: '现浇箱梁班组',
      laborServiceUnit: '江苏省住房和城乡建设厅',
      entryTime: '2018-03-04',
      exitTime: '2020-03-04'
    },{
      key: '2',
      projectName: '海安至启东高速公路工程',
      bidSection: '二标',
      job: '架子工',
      team: '现浇箱梁班组',
      laborServiceUnit: '江苏省住房和城乡建设厅',
      entryTime: '2015-12-04',
      exitTime: '2018-03-01'
    }
  ];

  import title1 from "@/views/title/index.vue";
  import Viewer from 'viewerjs';
  import 'viewerjs/dist/viewer.css';
  import supportCompany from "@/views/supportCompany/index.vue"

export default {
  mounted(){
    window.scrollTo(0,0);
    const ViewerDomZ = document.getElementById('cardZ');
    const ViewerDomF = document.getElementById('cardF');
    new Viewer(ViewerDomZ, {});
    new Viewer(ViewerDomF, {});
    this.test= this.debounce(this.handleScroll, 20);
    window.addEventListener('scroll',this.test);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.test);
  },
  destroyed() {
    window.removeEventListener("scroll", this.test);
  },
  components:{
    title1,
    Viewer,
    supportCompany
  },
  data() {
    return {
      visible: false,
      visiblePDF: false,
      home: '/gateway',
      projectDetails: '/projectDetails',
      laborUnit: '/laborUnit',
      teamGroup: '/teamGroup',
      salaryInformation: '/salaryInformation',
      fuConstruction: '/fu/construction',
      defaultActiveKey: '1', //默认选中的面板
      isFixed: false,
      imgUrlZ: require('../../assets/idCardZ.png'),
      imgUrlF: require('../../assets/idCardF.png'),
      labourHeight: '75px',
      contractHeight: '75px',
      labour: false,
      contract: false,
      data1,
      columns1,
      data2,
      columns2,
      data3,
      columns3,
      data4,
      columns4,
      dateTimeList: [
        {
          a: '1',
          aa: '07:23:19',
          b: '9',
          bb: '07:23:19',
          c: '17',
          cc: '07:23:19',
          d: '25',
          dd: '07:23:19'
        },
        {
          a: '2',
          aa: '07:23:19',
          b: '10',
          bb: '07:23:19',
          c: '18',
          cc: '07:23:19',
          d: '26',
          dd: '07:23:19'
        },
        {
          a: '3',
          aa: '07:23:19',
          b: '11',
          bb: '07:23:19',
          c: '19',
          cc: '07:23:19',
          d: '27',
          dd: '07:23:19'
        },
        {
          a: '4',
          aa: '07:23:19',
          b: '12',
          bb: '07:23:19',
          c: '20',
          cc: '07:23:19',
          d: '28',
          dd: '07:23:19'
        },
        {
          a: '5',
          aa: '07:23:19',
          b: '13',
          bb: '07:23:19',
          c: '21',
          cc: '07:23:19',
          d: '29',
          dd: '07:23:19'
        },
        {
          a: '6',
          aa: '07:23:19',
          b: '14',
          bb: '07:23:19',
          c: '22',
          cc: '07:23:19',
          d: '30',
          dd: '07:23:19'
        },
        {
          a: '7',
          aa: '07:23:19',
          b: '15',
          bb: '07:23:19',
          c: '23',
          cc: '07:23:19',
          d: '31',
          dd: '07:23:19'
        },
        {
          a: '8',
          aa: '07:23:19',
          b: '16',
          bb: '07:23:19',
          c: '24',
          cc: '07:23:19',
          d: '',
          dd: ''
        }
      ]
    }
  },
  methods:{
    goSalaryInformation() {
      this.$router.push({path: '/salaryInformation'})
    },
    showTimeDetail(){
      this.visible = true;
    },
    onScroll() {
      let isBottom = false;
        //变量scrollTop是滚动条滚动时,距离顶部的距离
        let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        //滚动条到底部的条件
        if( scrollTop+windowHeight == scrollHeight ){
          isBottom = true;
        }
        return isBottom
    },
    //防抖
    debounce(fn, wait) {
      var timeout = null;
      return function() {
          if(timeout !== null)   clearTimeout(timeout);
          timeout = setTimeout(fn, wait);
      }
    },
    callback(tab) {
      this.defaultActiveKey = tab;
      const tabObj = {
          '1': '.certificatePoint',
          '2': '.attendancePoint',
          '3': '.wagesPoint',
          '4': '.resumePoint'
      }
      this.$el.querySelector(tabObj[tab]).scrollIntoView({ behavior: "smooth", block: "start"});
    },
    pdfView() {
      this.visiblePDF = true;
      // window.open('http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf')
    },
    changeLabourHeight() {
      this.labour = !this.labour;
      if (this.labour) {
          this.labourHeight = '128px';
      } else {
          this.labourHeight = '75px';
      }
    },
    changeContractHeight(){
      this.contract = !this.contract
      if (this.contract) {
          this.contractHeight = '128px';
      } else {
          this.contractHeight = '75px';
      }
    },
    handleScroll(){
      const distanceTopA = this.$refs.distanceTopA.getBoundingClientRect().top;
      const distanceTopB = this.$refs.distanceTopB.getBoundingClientRect().top;
      const distanceTopC = this.$refs.distanceTopC.getBoundingClientRect().top;
      const distanceTopD = this.$refs.distanceTopD.getBoundingClientRect().top;
      if (distanceTopA < 221) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
      if (this.onScroll()){
        this.defaultActiveKey = '4';
        return;
      }
      // if (this.defaultActiveKey == '4') return;
      if (distanceTopA >=50 && distanceTopA <= 200) {
          this.defaultActiveKey = '1';
      } else if (distanceTopB >=50 && distanceTopB <= 200) {
          this.defaultActiveKey = '2';
      } else if (distanceTopC >=50 && distanceTopC <= 200) {
          this.defaultActiveKey = '3';
      } else if (distanceTopD >=50 && distanceTopD <= 200) {
          this.defaultActiveKey = '4';
      }
    }
  },
  computed: {
      labourState() {
        return {
          '--box-height': this.labourHeight
        }
      },
      contractState() {
          return {
            '--box-height': this.contractHeight
          }
        }
  },
}
</script>

<style scoped>
  div, p, span{
    font-family: "Microsoft YaHei";
  }
  .breadCrumbBox{
    width: 100%;
    height: 40px;
    background-color: rgba(246, 248, 249, 1);
    position: fixed;
    top: 100px;
    z-index: 100;
  }
  ::v-deep .ant-breadcrumb > span:last-child{
    color: rgba(20, 146, 255, 1);
  }
  .personDetailBox{
    width: 1200px;
    /*height: 500px;*/
    margin: auto;
    margin-top: 20px;
  }
  .personDetailBoxB{
    width: 1200px;
    margin: auto;
    margin-top: 50px;
  }
  .personDetailBoxC{
    width: 1200px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 140px;
  }
  .leftBox{
    width: 140px;
    height: 100%;
  }
  .rightBox{
    width: 1020px;
    height: 100%;
  }
  .photoBox{
    width: 140px;
    height: 172px;
  }
  .personnelCode{
    font-size: 14px;
    color: #999999;
    text-align: center;
    margin-top: 16px;
  }
  .code{
    font-size: 16px;
    color: #333333;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0;
  }
  .jobInformation{
    font-size: 14px;
    width: 80px;
    height: 24px;
    text-align: center;
    border-radius: 0;
    margin: auto;
    margin-top: 14px;
  }
  .personName{
    font-size: 24px;
    font-weight: bold;
    color: #333333;
  }
  .personJob{
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin-left: 36px;
  }
  .personCardBox{
    width: 100%;
    height: 162px;
    padding: 24px 78px 21px 30px;
    background-color: #F5FAFF;
    margin-top: 22px;
  }
  .personCardBox > div > p{
    font-size: 15px;
    color: #333;
    font-weight: 400;
  }
  .idCardBox > div > p{
    font-size: 14px;
    color: #666;
    font-weight: 400;
    margin-top: 16px;
    text-align: center;
  }
  .serviceInformationBox{
    margin-top: 25px;
  }
  .serviceInformationBox > p{
    font-size: 16px;
    font-weight: 400;
    color: #333;
  }
  .serviceInformation{
    width: 100%;
    /*height: 128px;*/
    background-color: #F5FAFF;
    overflow: hidden;
  }
  .serviceInformation > div{
    margin-left: 30px;
  }
  .serviceInformation > div > span{
    display: inline-block;
    width: 310px;
  }
  .informationScreeningBox{
    width: 1200px;
    margin: auto;
    margin-top: 72px;
  }
  /*.informationScreeningBox > div{*/
  /*  width: 90px;*/
  /*  height: 37px;*/
  /*  line-height: 37px;*/
  /*  text-align: center;*/
  /*  margin-left: 50px;*/
  /*}*/
  /*.informationScreeningBox>div>a:hover{*/
  /*  color: #5E90ED;*/
  /*}*/
  /*.informationScreeningBox > div > a{*/
  /*  font-size: 16px;*/
  /*  color: #666666;*/
  /*}*/
  .point{
    display: inline-block;
    width: 90px;
    height: 37px;
    text-align: center;
    line-height: 37px;
    border-bottom: 2px solid #1492FF;
    color: #1492FF;
    font-size: 16px
  }
  .pointBox{
    /*border-bottom: 1px solid #E4E4E4;*/
    margin-bottom: 40px;
  }
  .labourClass{
      height: var(--box-height);
  }
  .contractClass{
    height: var(--box-height);
  }
  .fixed{
    position: fixed;
    top: 140px;
    background-color: white;
    color: white;
    left: calc(50% - 600px);
    margin: 0;
    z-index: 100;
    height: 45px;
  }
  .noFixed{
    position: static;
  }
  .positionSignAClass{
    height: 184px;
  }
  .positionSignBClass{
    height: 147px;
  }
  .date{
    width: 100px;
    height: 50px;
    border: 1px solid #EAEAEA;
    border-left: none;
    border-bottom: none;
    margin: 0;
    text-align: center;
    line-height: 50px;
    background-color: #F6F8F9;
  }
  .time{
    width: 160px;
    height: 50px;
    border: 1px solid #EAEAEA;
    border-left: none;
    border-bottom: none;
    margin: 0;
    text-align: center;
    line-height: 50px;
    background-color: #F6F8F9;
  }
  ::v-deep .ant-modal{
    width: 1040px !important;
  }
  ::v-deep .ant-modal-body{
    padding: 20px;
    padding-top: 50px;
  }
  .tableInBox{
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0;
    border: 1px solid #EAEAEA;
    border-left: none;
    border-bottom: none;
    background-color: #F6F8F9;
  }
  .tableInBox2{
    width: 160px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0;
    border: 1px solid #EAEAEA;
    border-left: none;
    border-bottom: none;
  }
  /*.personDetailBox > div{*/
  /*  border-bottom: 1px solid #E4E4E4;*/
  /*}*/
  /*.serviceInformation > div{*/
  /*  width: 100px;*/
  /*}*/
  /*.serviceInformation > div > p{*/
  /*  margin: 0;*/
  /*}*/
</style>
